<template>
	<view>
		<!-- 会员介绍 -->
		<view class="introduce"><img src="https://iflytts.oss-cn-qingdao.aliyuncs.com/website/img/webxzy/newvips.png" alt=""></image></view>
		<!-- 功能跳转 -->
		<view class="serviceview">
			<view class="servicecell_btn">
				<view class="servicecell_left">
					<view class="servicecell_left_image"><image src="/static/uni_icon/ios/kf.png"></image></view>
					<view class="servicecell_left_title">联系客服</view>
				</view>
				<view class="servicecell_right">
					<view class="servicecell_right_txt">客服在线随时咨询</view>
					<view class="lg text-gray cuIcon-right"></view>
				</view>
				<button
					class="btn"
					open-type="contact"
					show-message-card="true"
					send-message-title="iOS会员如何购买"
					send-message-img="https://iflytts.oss-cn-qingdao.aliyuncs.com/qrCode/wx_2022_5_25_fxt1660117271890.png"
				></button>
			</view>
			<view class="servicecell" @click="clickTutorial2">
				<view class="servicecell_left">
					<view class="servicecell_left_image"><image src="/static/uni_icon/ios/wx.png"></image></view>
					<view class="servicecell_left_title">微信公众号</view>
				</view>
				<view class="servicecell_right">
					<view class="servicecell_right_txt">更多教程、咨询</view>
					<view class="lg text-gray cuIcon-right"></view>
				</view>
			</view>
			<view class="servicecell" bindtap="clickTutorial3">
				<view class="servicecell_left">
					<view class="servicecell_left_image"><image src="/static/uni_icon/ios/fl.png"></image></view>
					<view class="servicecell_left_title">福利活动</view>
				</view>
				<view class="servicecell_right">
					<view class="servicecell_right_txt">免费会员</view>
					<view class="lg text-gray cuIcon-right"></view>
				</view>
			</view>
			<view class="servicecell" bindtap="clickTutorial">
				<view class="servicecell_left">
					<view class="servicecell_left_image"><image src="/static/uni_icon/ios/dn.png"></image></view>
					<view class="servicecell_left_title">电脑端使用</view>
				</view>
				<view class="servicecell_right">
					<view class="servicecell_right_txt">在电脑上使用</view>
					<view class="lg text-gray cuIcon-right"></view>
				</view>
			</view>
			<view class="btn2">
				<van-button type="primary" block custom-style="border-radius: 18rpx; height: 89rpx;" color="#FF4545"></van-button>
				<u-button text="联系客服" type="primary" color="#FF4545" custom-style="border-radius: 18rpx; height: 89rpx;" @click="onClose"></u-button>
			</view>
		</view>

		<u-popup :show="show" @close="onClose" :round="10" :safeAreaInsetBottom="false" closeable mode="center">
			<view class="popup_box">
				<view class="popup_box_text">进入客服消息后，点击右下角快捷图片或回复数字1 获得购买链接</view>
				<view class="popup_box_image"><image src="https://iflytts.oss-cn-qingdao.aliyuncs.com/qrCode/wx_2022_5_25_fxt1660206111495.gif"></image></view>
				<view class="popup_box_btn">
					<u-button
						text="联系客服"
						type="primary"
						color="#FF4545"
						open-type="contact"
						show-message-card="true"
						send-message-title="iOS会员如何购买"
						send-message-img="https://iflytts.oss-cn-qingdao.aliyuncs.com/qrCode/wx_2022_5_25_fxt1660117271890.png"
						custom-style="border-radius: 18rpx; height: 89rpx;"
					></u-button>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
export default {
	data() {
		return {
			show: false
		};
	},
	methods: {
		onClose() {
			this.show = !this.show;
		},
		//福利活动
		clickTutorial3() {
		
			// wx.navigateTo({
			// 	url: '/pages/userCenterView/shareVip/shareVip'
			// });
		},
		//微信公众号
		clickTutorial2() {
			uni.navigateTo({
				url: '/pages/webview/view'
			});
			// wx.navigateTo({
			// 	url: '/pages/userCenterView/jumpLinks/jumpLinks?type=1'
			// });
		},
		clickTutorial() {
			// wx.navigateTo({
			// 	url: '/pages/userCenterView/jumpLinks/jumpLinks?type=4'
			// });
		}
	}
};
</script>

<style lang="scss">
page {
	background: #f5f5f5;
}

.popup_box {
	width: 644rpx;
	height: 872rpx;
	background: #ffffff;
	border-radius: 18rpx;
	padding: 100rpx 0rpx 0rpx 0rpx;
}

.popup_box_text {
	width: 570rpx;
	margin: auto;
	font-size: 25rpx;

	font-weight: 500;
	color: #333333;
}

.custom-style {
	width: 571rpx;
	height: 72rpx;
	background: #ff4545;
	border-radius: 12rpx;
}

.popup_box_btn {
	margin: auto;
	margin-top: 15rpx;
	width: 571rpx;
}

.btn2 {
	position: fixed;
	bottom: 70rpx;
	left: 35rpx;
	margin-top: 15rpx;
	width: 680rpx;
	height: 89rpx;
	background: #ff4545;
	border-radius: 18rpx;
}

.popup_box_image {
	margin: auto;
	margin-top: 30rpx;
	width: 570rpx;
	height: 553rpx;
}

.popup_box_image image {
	width: 100%;
	height: 100%;
}

.title {
	font-size: 34rpx;

	font-weight: bold;
	color: #333333;
	text-align: center;
	line-height: 90rpx;
}

.introduce {
	width: 693rpx;
	height: 679rpx;
	margin: auto;
	margin-top: 50rpx;
}

.introduce image {
	width: 100%;
	height: 100%;
}

.serviceview {
	display: flex;
	flex-direction: column;
	width: 94%;
	margin-left: 3%;
	margin-top: 100rpx;
	background-color: white;
	border-radius: 20rpx;
}

.servicecell {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	height: 100rpx;
	width: 100%;
}

.servicecell_btn {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	height: 100rpx;
	width: 100%;
	position: relative;
}

.servicecell_left,
.servicecell_right {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding-right: 27rpx;
}

.serviceview {
	display: flex;
	flex-direction: column;
	margin-left: 3%;
	width: 94%;
	border-radius: 20rpx;
}

.servicecell_left_image {
	width: 48rpx;
	height: 48rpx;
	margin-left: 28rpx;
	margin-right: 18rpx;
}

.servicecell_left_image image {
	width: 100%;
	height: 100%;
}

.servicecell_right_txt {
	font-size: 22rpx;

	font-weight: 500;
	color: #636363;
	margin-right: 25rpx;
}

.servicecell_left_title {
	font-size: 24rpx;

	font-weight: bold;
	color: #333333;
}

.servicecell_btn {
	width: 100%;
}

.btn {
	width: 100%;
	height: 100%;
	position: absolute;
	z-index: 100;
	opacity: 0;
}
</style>
